<template>
<div class="user">
		<div class="common-seach-wrap">
			<el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item :label="$t('user.review_status')">
					<el-select v-model="formInline.applyStatus" :placeholder="$t('user.select_status')">
						<el-option :label="$t('user.all')" value="-1"></el-option>
						<el-option :label="$t('user.pending_review')" value="10"></el-option>
						<el-option :label="$t('user.approved')" value="20"></el-option>
						<el-option :label="$t('user.paid_out')" value="40"></el-option>
						<el-option :label="$t('user.rejected')" value="30"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('user.withdrawal_method')">
					<el-select v-model="formInline.payType" :placeholder="$t('user.select_withdrawal_method')">
						<el-option :label="$t('user.all')" value="-1"></el-option>
						<el-option :label="$t('user.wechat')" value="10"></el-option>
						<el-option :label="$t('user.alipay')" value="20"></el-option>
						<el-option :label="$t('user.bank_card')" value="30"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('user.user_id')">
					<el-input v-model="formInline.userId" :placeholder="$t('user.input_user_id')"></el-input>
				</el-form-item>
				<el-form-item label=""><el-input v-model="formInline.search"
						:placeholder="$t('user.input_user_info')"></el-input></el-form-item>
				<el-form-item><el-button type="primary" @click="onSubmit">{{$t('user.search')}}</el-button></el-form-item>
				<el-form-item>
					<el-button size="small" type="success" @click="onExport" v-auth="'/user/cash/export'">{{$t('user.export')}}</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!--内容-->
		<div class="product-content">
			<div class="table-wrap">
				<el-table :data="tableData" border style="width: 100%" v-loading="loading">
					<el-table-column prop="userId" :label="$t('user.user_id_label')" width="60"></el-table-column>
					<el-table-column prop="nickName" :label="$t('user.wechat_avatar')" width="70">
						<template #default="scope">
							<img class="radius" v-img-url="scope.row.avatarUrl" width="30" height="30" />
						</template>
					</el-table-column>
					<el-table-column prop="nickName" :label="$t('user.wechat_nickname')" width="100"></el-table-column>
					<el-table-column prop="money" :label="$t('user.withdrawal_amount')">
						<template #default="scope">
							<span class="orange">{{ scope.row.money }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="money" :label="$t('user.actual_amount_received')">
						<template #default="scope">
							<span class="orange">{{ scope.row.realMoney }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="payTypeText" :label="$t('user.withdrawal_method')"></el-table-column>
					<el-table-column prop="payType" :label="$t('user.withdrawal_info')">
						<template #default="scope">
							<div v-if="scope.row.payType == 10">
								<p>
									<span>{{$t('user.name0',{place1:scope.row.realName})}}</span>
								</p>
							</div>
							<div v-else-if="scope.row.payType == 20">
								<p>
									<span>{{$t('user.alipay_name_placeholder',{place1:scope.row.alipayName})}}</span>
								</p>
								<p>
									<span>{{$t('user.alipay_account_placeholder',{place1:scope.row.alipayAccount})}}</span>
								</p>
							</div>
							<div v-else-if="scope.row.payType == 30">
								<p>
									<span>{{$t('user.bank_name_placeholder',{place1:scope.row.bankName})}}</span>
								</p>
								<p>
									<span>{{$t('user.bank_account_holder_placeholder',{place1:scope.row.bankAccount})}}</span>
								</p>
								<p>
									<span>{{$t('user.bank_account_number_placeholder',{place1:scope.row.bankCard})}}</span>
								</p>
							</div>
							<div v-else>
								<p><span>--</span></p>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="applyStatusText" :label="$t('user.processing_status')"></el-table-column>
					<el-table-column prop="createTime" :label="$t('user.application_time')" width="135"></el-table-column>
					<el-table-column prop="auditTime" :label="$t('user.review_time')" width="135"></el-table-column>
					<el-table-column fixed="right" :label="$t('user.actions')" width="180">
						<template #default="scope">
							<div v-if="scope.row.applyStatus == 10">
								<el-button @click="editClick(scope.row)" type="text" size="small"
									v-auth="'/user/cash/audit'">{{$t('user.review')}}</el-button>
							</div>
							<div v-if="scope.row.applyStatus == 20">
								<!--            payType 打款方式 (10微信 20支付宝 30银行卡)-->
								<template v-if="scope.row.applyStatus == 20 && scope.row.payType != 10">
									<el-button @click="makeMoney(scope.row)" type="text" size="small"
										v-auth="'/user/cash/money'">{{$t('user.manual_transfer')}}</el-button>
								</template>
								<!--                <template v-if="scope.row.applyStatus == 20&& scope.row.payType == 20">-->
								<!--                  <el-button @click="aliPay(scope.row)" type="text" size="small" v-auth="'/user/cash/money'">支付宝打款</el-button>-->
								<!--                </template>-->
								<template v-if="
                    scope.row.applyStatus == 20&&scope.row.payType == 10&&scope.row.batchId == ''
                  ">
									<el-button @click="WxPay(scope.row.id)" type="text" size="small"
										v-auth="'/user/cash/wxpay'">{{$t('user.wechat_payment')}}</el-button>
								</template>
							</div>
							<div v-if="scope.row.applyStatus == 30">
								<el-button @click="editClick(scope.row)" type="text" size="small">{{$t('user.details')}}</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!--分页-->
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
					:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
					:total="totalDataNumber"></el-pagination>
			</div>
		</div>
		<Edit v-if="open_edit" :open_edit="open_edit" :form="userModel" @closeDialog="closeDialogFunc($event, 'edit')">
		</Edit>
	</div>
</template>

<script>
import BalanceApi from "@/api/balance.js";
import { getCookie } from "@/utils/base.js";
import qs from "qs";
import Edit from "./dialog/Edit.vue";
import { useUserStore } from "@/store";
const {
  token
} = useUserStore();
export default {
  components: {
    /*编辑组件*/
    Edit
  },
  data() {
    return {
      token,
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      formInline: {
        search: "",
        /*用户ID*/
        userId: ""
      },
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {}
    };
  },
  props: {},
  watch: {
    $route(to, from) {
      if (to.query.userId != null) {
        this.formInline.userId = to.query.userId;
      } else {
        this.formInline.userId = "";
      }
      this.curPage = 1;
      this.getData();
    }
  },
  created() {
    if (this.$route.query.userId != null) {
      this.formInline.userId = this.$route.query.userId;
    }
    /*获取列表*/
    this.getData();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      let Params = self.formInline;
      Params.pageIndex = self.curPage;
      Params.pageSize = self.pageSize;
      BalanceApi.cashList(Params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.records;
        self.totalDataNumber = res.data.total;
      }).catch(error => {});
    },
    /*搜索*/
    onSubmit() {
      this.curPage = 1;
      this.getData();
    },
    onExport: function () {
      let baseUrl = import.meta.env.VITE_BASIC_URL;
      if (!baseUrl) {
        baseUrl = window.location.protocol + "//" + window.location.host;
      }
      let Params = this.formInline;
      Params.tokenshop = this.token;
      window.location.href = baseUrl + "/api/shop/user/cash/export?" + qs.stringify(Params);
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getData();
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.getData();
    },
    /*打开弹出层编辑*/
    editClick(item) {
      this.userModel = item;
      this.open_edit = true;
    },
    /*关闭弹窗*/
    closeDialogFunc(e, f) {
      if (f == "add") {
        this.open_add = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
      if (f == "edit") {
        this.open_edit = e.openDialog;
        if (e.type == "success") {
          this.getData();
        }
      }
    },
    /*确认打款*/
    makeMoney(e) {
      let self = this;
      ElMessageBox.confirm($t("user.confirm_transfer"), $t("user.alert"), {
        confirmButtonText: $t("user.confirm_action"),
        cancelButtonText: $t("user.cancel_button"),
        type: "warning"
      }).then(() => {
        self.loading = true;
        BalanceApi.cashMoney({
          id: e.id
        }, true).then(data => {
          self.loading = false;
          if (data.code == 1) {
            ElMessage({
              message: $t("user.operation_success"),
              type: "success"
            });
            this.getData();
          } else {
            self.loading = false;
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    },
    /*支付宝打款*/
    aliPay(e) {
      let self = this;
      ElMessageBox.confirm($t("user.confirm_alipay_payout"), $t("user.alert"), {
        confirmButtonText: $t("user.confirm_action"),
        cancelButtonText: $t("user.cancel_button"),
        type: "warning"
      }).then(() => {
        self.loading = true;
        BalanceApi.aliPay({
          id: e.id
        }, true).then(data => {
          self.loading = false;
          if (data.code == 1) {
            ElMessage({
              message: $t("user.operation_success"),
              type: "success"
            });
            this.getData();
          } else {
            self.loading = false;
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    },
    /*微信打款*/
    WxPay(e) {
      let self = this;
      ElMessageBox.confirm($t("user.confirm_wechat_payout"), $t("user.alert"), {
        confirmButtonText: $t("user.confirm_action"),
        cancelButtonText: $t("user.cancel_button"),
        type: "warning"
      }).then(() => {
        self.loading = true;
        BalanceApi.cashWxpay({
          id: e
        }, true).then(data => {
          self.loading = false;
          if (data.code == 1) {
            ElMessage({
              message: $t("user.operation_success"),
              type: "success"
            });
            this.getData();
          } else {
            self.loading = false;
          }
        }).catch(error => {
          self.loading = false;
        });
      }).catch(() => {});
    }
  }
};
</script>

